<template>
  <div class="modeTable">
    <div>
      <!-- 表格数据 -->
      <el-table
        :show-summary="showSummary"
        :data="tableData"
        :max-height="maxHeight"
        :row-key="rowKey"
        v-loading="loading"
        element-loading-text="加载中..."
        element-loading-spinner="el-icon-loading"
        element-loading-background="rgba(0, 0, 0, 0.2)"
        :size="size"
        :highlight-current-row="true"
        @sort-change="sortChange"
        @selection-change="selectionChange"
        @current-change="currentChange"
        @row-click="rowClick"
        @row-dblclick="rowDblclick"
        @cell-click="cellClick"
        style="width: 100%"
        header-row-class-name="tableHead"
        :row-style="tableRowStyle"
        :tree-props="treeProps"
        default-expand-all
      >
        <slot></slot>
      </el-table>
    </div>
    <div class="pageBox">
      <el-pagination
        v-if="paging"
        @size-change="limitChange"
        @current-change="pageChange"
        :current-page.sync="params.pageNum"
        :page-size="params.pageSize"
        :page-sizes="[10, 20, 30, 50, 100]"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
      >
      </el-pagination>
    </div>
  </div>
</template>
<script>
export default {
  props: {
    // 尺寸
    size: {
      default: "small",
    },
    // 分页
    paging: {
      default: true,
    },
    maxHeight: {
      // default: 800,
    },
    //是否显示合计
    showSummary: {
      type: Boolean,
      default: false,
    },
    tableRowStyle: {
      type: Function,
      default: () => {},
    },
    // loading
    loading: {
      type: Boolean,
      default: false,
    },
    // 表格数据
    tableData: {
      type: Array,
      default: () => [],
    },
    // 总条数
    total: {
      type: Number,
      default: 0,
    },
    // 表格参数
    params: {
      type: Object,
      default: () => {
        if(this.paging){
          return {
            pageNum: 1,
            pageSize: 10,
          };
        }else{
          return{}
        }
      },
    },
    // 树形表格配置
    treeProps: {
      type: Object,
      default: () => {
        return {
          children: "children",
          hasChildren: "hasChildren",
        };
      },
    },
    // 行key
    rowKey: {
      type: String,
      default: "id",
    },
  },
  data() {
    return {};
  },
  computed: {
    tableHeight: function () {
      return this.paging ? "calc(100% - 32px)" : "100%";
    },
  },
  mounted() {
    // console.log(this.treeProps);
  },
  methods: {
    //以下是对el-table原来的方法再次封装emit出去
    // 多选
    selectionChange(val) {
      this.$emit("selection-change", val);
    },
    // 单选
    currentChange(currentRow, oldCurrentRow) {
      this.$emit("current-change", currentRow, oldCurrentRow);
    },
    rowClick(row, event, column) {
      this.$emit("row-click", row, event, column);
    },
    rowDblclick(row, event, column) {
      this.$emit("row-dblclick", row, event, column);
    },
    cellClick(row, column, cell, event) {
      this.$emit("cell-click", row, column, cell, event);
    },
    // 排序
    sortChange(column, prop, order) {
      this.$emit("sort-change", column, prop, order);
    },
    // 表格翻页
    pageChange(page) {
      this.$emit("page-change", page);
    },
    limitChange(limit) {
      this.$emit("limit-change", limit);
    },
  },
};
</script>
<style lang="scss" scoped>
.modeTable ::v-deep .el-table th.el-table__cell {
  background-color: #fbfbfd;
}
.modeTable ::v-deep .el-table {
  font-size: 16px;
}
.modeTable ::v-deep .el-table .el-table__cell {
  padding: 5px 0;
}
.pageBox {
  margin: 1rem 0;
  display: flex;
  justify-content: center;
}
</style>
